<template>
  <div>
    <span class="el-menu__title">密码修改</span>
    <el-form :rules="rules" ref="updatePwd" :model="updatePwd" class="UpdateContainer"
             v-loading="loading"
             element-loading-text="正在连接外星网络">

      <el-form-item label="用户名">
        <el-input type="text" v-model="updatePwd.username" clearable maxlength="15" readonly
                  placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="oldValue" label="旧密码">
        <el-input v-model="updatePwd.oldValue" show-password clearable maxlength="15"
                  placeholder="请输入旧密码"></el-input>
      </el-form-item>
      <el-form-item prop="newValue" label="新密码">
        <el-input type="password" show-password v-model="updatePwd.newValue" clearable maxlength="15"
                  placeholder="请输入新密码"></el-input>
      </el-form-item>
      <el-form-item prop="newValue2" label="确认密码">
        <el-input type="password" show-password v-model="updatePwd.newValue2" clearable maxlength="15"
                  placeholder="请再次输入新密码" @keypress.native.enter="UpdatePwd()"></el-input>
      </el-form-item>

      <el-button type="primary" style="width: 100%" @click="UpdatePwdOlder()">修改</el-button>
    </el-form>
  </div>

</template>

<script>
    import {postRequest} from "../../utils/api"

    export default {

        name: "UpdatePwd",
        data() {
            return {
                updatePwd: {
                    username: this.$store.getters.getLoginParam.username, // 用户名
                    oldValue: '', // 旧密码
                    newValue: '', // 新密码
                },
                loading: false,
                rules: {
                    oldValue: [{required: true, message: '旧密码不可为空', trigger: 'blur'}],
                    newValue: [{required: true, message: '新密码不可为空', trigger: 'blur'}],
                    newValue2: [{required: true, message: '请再次确认密码', trigger: 'blur'}],
                }
            }
        },
        methods: {
            UpdatePwdOlder() {
                this.$refs.updatePwd.validate((valid) => {
                    if (valid) {
                        if (this.updatePwd.oldValue === this.updatePwd.newValue) {
                            this.$message.warning('新密码不可与旧密码重复！');
                            this.updatePwd.newValue = ''
                            this.updatePwd.newValue2 = ''
                            this.updatePwd.oldValue = ''
                            return false
                        }
                        if (this.updatePwd.newValue2 !== this.updatePwd.newValue) {
                            this.$message.warning('两次输入密码不一致，请重新输入！');
                            this.updatePwd.newValue = ''
                            this.updatePwd.newValue2 = ''
                            return false
                        }
                        this.loading = true
                        postRequest('/older/updatePsd',
                            {
                                'username': this.updatePwd.username,
                                'oldValue': this.updatePwd.oldValue,
                                'newValue': this.updatePwd.newValue,
                            }
                        ).then(res => {
                            // 密码修改校验成功
                            if (res && res.flag === '1') {
                                this.loading = false
                                // 保存登录信息
                                this.$store.commit('setLoginParam', '')
                                this.$message.success(' 密码修改成功！请重新登陆');
                                // replace 不可回退  铺设可以
                                this.$router.push('/Login')
                            } else {
                                this.loading = false
                                // 登录失败
                                this.updatePwd.newValue = ''
                                this.updatePwd.newValue2 = ''
                                this.updatePwd.oldValue = ''
                                this.$message.error(res.msg + '!');
                            }
                        })
                    } else {
                        this.$message.warning('请完整填写修改信息！');
                        return false;
                    }
                })
            }
        },
    }
</script>

<style scoped>
  .UpdateContainer {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 70px 160px;
    width: 500px;
    padding: 20px 35px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .el-menu__title {
    font-family: "Microsoft YaHei";
    font-size: 1.5rem;
    color: #0682C5;
    letter-spacing: 0;
    line-height: 33px;
    margin-left: 20px;
  }
</style>
